<template>
  <div class="asideContianer">
    <!--    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
          <el-radio-button :label="false">展开</el-radio-button>
          <el-radio-button :label="true">收起</el-radio-button>
        </el-radio-group>-->
    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
             :collapse="isCollapse" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">

      <h3>{{ isCollapse ? '管理' : '管理系统' }}</h3>
      <!--   没有二级菜单   -->
      <el-menu-item v-for="item in noChildren" :key="item.name" :index="item.name+'' " @click="clickMenu(item)">
        <i :class="`el-icon-${item.icon}`"></i>
        <span slot="title">{{ item.menuName }}</span>
      </el-menu-item>

      <!--有二级菜单-->
      <el-submenu v-for="item in hasChildren" :key="item.name" :index="item.name+''">
        <template slot="title">
          <i :class="`el-icon-${item.icon}`"></i>
          <span slot="title">{{ item.menuName }}</span>
        </template>

        <el-menu-item-group v-for="subItem in item.children" :key="subItem.name">
          <el-menu-item :index="subItem.name+''" @click="clickMenu(subItem)">
            <i :class="`el-icon-${subItem.icon}`"></i>
            {{ subItem.menuName }}
          </el-menu-item>

        </el-menu-item-group>

      </el-submenu>

    </el-menu>

  </div>

</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Aside",
  data() {
    return {
      // isCollapse: false,
      menuData: [
        {
          path: '/home',
          name: 'main',
          menuName: '首页',
          icon: "s-home",
          url: "/home"
        }, {
          name: 'sys',
          menuName: '菜单管理',
          icon: "user",
          children: [{
            path: '/sysUser',
            name: 'sysUser',
            menuName: '用户管理',
            icon: "setting",
            url: "sys/sysUser"
          }, {
            path: '/sysRole',
            name: 'sysRole',
            menuName: '角色管理',
            icon: "setting",
            url: "sys/sysRole"
          }, {
            path: '/sysMenu',
            name: 'sysMenu',
            menuName: '菜单管理',
            icon: "setting",
            url: "sys/sysMenu"
          }
          ]
        },{
          name: 'caicacia',
          menuName: 'caicacia',
          icon: "user",
          children: [

          ]
        }

      ]
    };
  },
  mounted() {
    console.log("加载菜单 。。。")
    this.handleInitMenus();
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log("handleOpen")
      console.log(key)
      console.log(keyPath)
    },
    handleClose(key, keyPath) {
      console.log("handleClose")
      console.log(key)
      console.log(keyPath)
    },
    clickMenu: function (item) {
      console.log("clickMenu ...")
      if (item.path !== this.$route.path) {
        this.$router.push(item.path);
      }
      this.$store.commit('menuChange', item);

    },
    handleInitMenus: function () {
      this.menuData = [];
      this.$http.get('/SysMenu/findMensBySysRoleId?sysRoleId=' + sessionStorage.getItem('sysRoleId')).then((res) => {
        this.menuData = res.data.data
        let menus =  {
          path: '/home',
          name: 'main',
          menuName: '首页',
          icon: "s-home",
          url: "/home"
        };
        this.menuData.push(menus)
      })
    }
  },
  computed: {
    noChildren() {
      return this.menuData.filter(item => !item.children);
    },
    hasChildren() {
      return this.menuData.filter(item => item.children);
    },
    isCollapse() {
      return this.$store.state.tab.isCollapse;
    }

  }

}
</script>

<style lang="less" scoped>

.el-menu {
  height: 130vh;
  border-right: 0px;

  h3 {
    color: #fff;
    text-align: center;
    line-height: 48px;
    font-size: 22px;
    font-weight: 400;
    padding: 0 20px;
  }
}
</style>
